import {Box, Static, Layout, Group, Header, ScaleImg, Card, Footer, Tit, FooterTop, CarouselBox, Module} from '../components'
import {primaryColor} from '../../web-app-share/styles/common-color'

const Index = () => {

    return (
        <Layout>
            <Header/>
            <CarouselBox/>
            <Module/>
            <Tit label='招聘服务' height='8rem' fontSize='2.1rem' divider/>

            <Box padding='0 4%' width='100%' marginBottom='1.5rem'>
                <Box width='100%' flex='flex' justify='space-between' marginBottom='1rem'>
                    <ScaleImg src='/static/img/zz_08.jpg' height='16.875rem' width='66%'>
                        <Static label='基于网络的资源分享，招聘资源共享将是一种趋势' fontSize='1.625rem' color='#fff'/>
                        <Static label='在招聘方面共享资源打破了传统的招聘方式，也打破根深蒂固的理念。' fontSize='1rem' color='#fff'/>
                    </ScaleImg>
                    <Box width='32%' height='16.875rem'>
                        <Box height='16.875rem' bgColor='#daa715' padding='1rem'/>
                    </Box>
                </Box>

                <Box width='100%' flex='flex' justify='space-between'>
                    {
                        scaleImgs.map((scaleImg, index) => {
                            return (
                                <Box width='23.5rem' key={index} flex='flex' direction='column' justify='space-between'>
                                    <ScaleImg src={scaleImg.src} height='8rem' width='100%'/>
                                    <Box bgColor='#fff' width='100%' flex='flex' direction='column' padding='.5rem'>
                                        <Static label={scaleImg.title} fontSize='1.25rem' color='#444'/>
                                        <Static label={scaleImg.content} fontSize='.75' color='#8c8c8c'/>
                                    </Box>
                                </Box>
                            )
                        })
                    }
                </Box>
            </Box>

            <Box padding='2% 4% 4% 4%' bgColor='#fff' width='100%' >
                <Tit label='人力资源服务的对象' height='6rem' fontSize='1.625rem'/>
                <Box width='100%' flex='flex' justify='space-between' marginTop='2rem'>
                    {
                        cards.map((card, index) => {
                            return (
                                <Card key={index} height='10rem' width='17rem' fontSize='8rem' color={primaryColor}
                                      icon={card.icon} title={card.title} content={card.content}
                                />
                            )
                        })
                    }
                </Box>
            </Box>
            <FooterTop title='让蜘蛛帮你重新掌控招聘'/>
            <Footer/>
        </Layout>
    )
};


const scaleImgs = [
    {src: '/static/img/s_02.jpg', title: '共享职位', content: '2018-01-16'},
    {src: '/static/img/s_02.jpg', title: '共享渠道', content: '2018-01-16'},
    {src: '/static/img/s_02.jpg', title: '共享简历', content: '2018-01-16'},
];

const cards = [
    {icon: 'qiyezongheshujuchaxun', title: '企业', content: '实现互联网轻松招聘'},
    {icon: 'disanfangdanbao', title: '第三方', content: '实现互联网联系'},
    {icon: 'user2', title: '个人', content: '专注互联网找工作'},
];


export default Index